<template>
    <div>
        <el-button type="primary" size="large" style="margin-bottom: 15px" icon="Plus" @click="ShowDialog(1)"> 添加</el-button>
        <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
            <el-form size="large" :model="search" class="demo-form-inline">
                <el-form-item label="内容搜索">
                    <el-col :span="4">
                        <el-select v-model="search.type" placeholder="请选择要搜索的字段" style="width: 100%">
                            <el-option label="文本" value="1" />
                            <el-option label="富文本" value="2" />
                        </el-select>
                    </el-col>
                    <el-col :span="11">
                        <el-input v-model="search.value" placeholder="请输入要搜索的内容" />
                    </el-col>
                </el-form-item>
                <el-form-item label="参照搜索">
                    <el-col :span="4">
                        <el-select v-model="search.test_reference_s" placeholder="请选择要搜索的参照" style="width: 100%">
                            <el-option label="开启" value="1" />
                            <el-option label="关闭" value="0" />
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
            <el-table :data="tableData" border highlight-current-row ref="multipleTable" @selection-change="handleSelectionChange" size="large">
                <el-table-column prop="test_id" label="ID" min-width="60" />
                <el-table-column prop="test_input" label="文本" min-width="80" />
                <el-table-column prop="test_rich" label="富文本" min-width="80" />
                <el-table-column prop="test_img_s" label="图片(点击放大)" min-width="80">
                    <template #default="scope">
                        <div style="display: flex; align-items: center" v-if="scope.row.test_img">
                            <el-image :preview-src-list="[scope.row.test_img_s]" :src="scope.row.test_img_s" style="width:40%" preview-teleported />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="test_img_many_s" label="图片(点击放大)" min-width="80">
                    <template #default="scope">
                        <template v-for="(item,index) in scope.row.test_img_many_s" :key="index">
                            <el-image :preview-src-list="[item.url]" :src="item.url" style="width:40%" preview-teleported />
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="test_reference_s" label="参照" min-width="60" />
                <el-table-column prop="test_time_s" label="年月日时分秒 时间戳" min-width="120" />
                <el-table-column prop="test_data" label="年月日" min-width="60" />
                <el-table-column prop="test_datatime" label="年月日时分秒" min-width="100" />
                <el-table-column prop="test_url" label="网址" min-width="100" />
                <el-table-column prop="test_radio_s" label="单选框" min-width="100" />

                <el-table-column prop="cz" label="操作" min-width="150">
                    <template #default="scope">
                        <el-button type="primary" size="large" icon="Edit" @click="showDialog(2,scope.row)">修改</el-button>
                        <el-button type="danger" size="large" icon="Delete" @click="delData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next, jumper, total, size" :total="total" @CurrentChange="CurrentChange"/>
        </el-space>
    </div>
</template>
<script>
    import { ElMessage, ElMessageBox } from "element-plus";
    import { TestLists, TestSave, TestDel } from "@/network/bewtest";
    import { toRefs, reactive, ref, shallowRef } from "vue";
    export default {
        setup() {
            const Data = reactive({
                tableData : [],
                total : 1,
                search : {
                    type : '1',
                    value : '',
                    test_reference_s : ''
                },
                title : "添加",
                form : {
                    test_id: 0,
                    test_input: "",
                    test_rich: "",
                    test_img: "",
                    test_img_s: "",
                    test_img_many: "",
                    test_reference: "",
                    test_time: "",
                    test_data: "",
                    test_datatime: "",
                    test_url: "",
                    test_radio: 1,
                    test_rich_editor: "",
                }
            })
            //获取数据列表
            TestLists().then((res) => {
                Data.tableData = res.lists;
                Data.total = res.count;
            });

            const onSearch = () => {
                if(!Data.search.value || Data.search.test_reference_s){
                    ElMessage({ message:'请输入要搜索的内容 或 选择要搜索的参照', type: "error" });
                    return false;
                }
                TestLists({type:Data.search.type,value:Data.search.value,test_reference_s:Data.search.test_reference_s}).then((res) => {
                    Data.tableData = res.lists;
                    Data.total = res.count;
                });
            }

            const ShowDialog = (e) => {
                Data.dialog = true;
                if (e == 1) {
                    Data.form = {
                        test_id: 0,
                        test_input: "",
                        test_rich: "",
                        test_img: "",
                        test_img_s: "",
                        test_img_many: "",
                        test_reference: "",
                        test_time: "",
                        test_data: "",
                        test_datatime: "",
                        test_url: "",
                        test_radio: 1,
                        test_rich_editor: "",
                    };
                    Data.title = "添加";
                } else if (e == 2) {
                        Data.title = "修改";
                        Data.submitMessage = "修改成功";
                        Data.form = Data.templateSelection;
            
                        //方法一：
                        // if (Data.templateSelection.test_img_many) {
                        //   Data.templateSelection.test_img_many = Data.templateSelection.test_img_many.split(";");
                        //   Data.templateSelection.test_img_many.pop();
                        //   Data.Rest_test_img_many = Data.templateSelection.test_img_many;
                        // }
                        // Data.imgList = Data.templateSelection.test_img_many_s.map((item) => {
                        //   return { name: item.uid, url: item.url };
                        // });
                        //方法二：
                        if (Data.form.test_img_many) {
                            Data.imgList = Data.form.test_img_many_s.map((item) => {
                                return { name: item.uid, url: item.url, data: item.data };
                            });
                            Data.form.test_img_many = Data.form.test_img_many_s.map((item) => {
                                return item.data;
                            });
                        } else {
                            Data.imgList = [];
                        }
                        // console.log(Data.form);
                        //方法三：
                        // if (Data.form.test_img_many) {
                        //   Data.imgList = Data.form.test_img_many_s.map((item) => {
                        //     return { name: item.uid, url: item.url, data: item.data };
                        //   });
                        // } else Data.imgList = [];
            
                        Data.dialogFormVisible = true;
                        console.log(Data.imgList);
                        console.log(Data.form);
                }
            };

            const CurrentChange = (e)=>{
                TestLists({p:e}).then((res) => {
                    Data.tableData = res.lists;
                    Data.total = res.count;
                });
            }

            return {
                ...toRefs(Data),
                onSearch,
                ShowDialog,
                CurrentChange
            };
        }
    }
</script>